<template>
	<a-modal
		v-model:open="modalVisible"
		title="VIP 兑换码"
		:width="500"
		@ok="handleRedeem"
		@cancel="handleCancel"
		:confirmLoading="loading"
	>
		<div class="vip-redeem-content">
			<div class="redeem-form">
				<a-form :model="redeemForm" layout="vertical">
					<a-form-item label="兑换码" required>
						<a-input
							v-model:value="redeemForm.redeemCode"
							placeholder="请输入VIP兑换码"
							size="large"
							:maxlength="32"
							@keyup.enter="handleRedeem"
							:disabled="loading"
						/>
					</a-form-item>
				</a-form>
			</div>

			<div class="vip-benefits">
				<div class="benefits-title">
					<CrownOutlined style="color: #ffd700; margin-right: 8px" />
					VIP特权一览
				</div>
				<div class="benefits-list">
					<div class="benefit-item">
						<CheckCircleOutlined style="color: #52c41a; margin-right: 8px" />
						无限制图片上传
					</div>
					<div class="benefit-item">
						<CheckCircleOutlined style="color: #52c41a; margin-right: 8px" />
						高级AI扩图功能
					</div>
					<div class="benefit-item">
						<CheckCircleOutlined style="color: #52c41a; margin-right: 8px" />
						专属云存储空间
					</div>
					<div class="benefit-item">
						<CheckCircleOutlined style="color: #52c41a; margin-right: 8px" />
						优先客服支持
					</div>
				</div>
			</div>
		</div>
	</a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { message } from 'ant-design-vue'
import { CrownOutlined, CheckCircleOutlined } from '@ant-design/icons-vue'
import { exchangeVipUsingPost } from '@/api/userController'

interface Props {
	visible: boolean
}

interface Emits {
	(e: 'update:visible', value: boolean): void
	(e: 'success'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const modalVisible = ref(false)
const loading = ref(false)

const redeemForm = reactive({
	redeemCode: '',
})

// 监听props变化
watch(
	() => props.visible,
	(newVal) => {
		modalVisible.value = newVal
	},
	{ immediate: true }
)

// 监听modal状态变化
watch(modalVisible, (newVal) => {
	emit('update:visible', newVal)
})

// 处理兑换
const handleRedeem = async () => {
	if (!redeemForm.redeemCode.trim()) {
		message.error('请输入兑换码')
		return
	}

	loading.value = true
	try {
		// 调用后端API进行兑换码验证
		const res = await exchangeVipUsingPost({
			vipCode: redeemForm.redeemCode.trim(),
		})

		if (res.data.code === 0 && res.data.data === true) {
			message.success('兑换成功！恭喜您成为VIP用户！')
			emit('success')
			handleCancel()
		} else {
			message.error(res.data.message || '兑换失败，请检查兑换码是否正确')
		}
	} catch (error: any) {
		console.error('兑换失败:', error)
		const errorMessage = error?.response?.data?.message || error?.message || '兑换失败，请检查兑换码是否正确'
		message.error(errorMessage)
	} finally {
		loading.value = false
	}
}

// 取消操作
const handleCancel = () => {
	modalVisible.value = false
	redeemForm.redeemCode = ''
}
</script>

<style scoped lang="scss">
.vip-redeem-content {
	.redeem-form {
		margin-bottom: 24px;
	}

	.vip-benefits {
		padding: 16px;
		background: linear-gradient(135deg, #fef9e7 0%, #fff7e6 100%);
		border-radius: 8px;
		border: 1px solid #ffe58f;

		.benefits-title {
			font-size: 16px;
			font-weight: 600;
			color: #d4821a;
			margin-bottom: 12px;
			display: flex;
			align-items: center;
		}

		.benefits-list {
			.benefit-item {
				display: flex;
				align-items: center;
				margin-bottom: 8px;
				color: #666;
				font-size: 14px;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
}

:deep(.ant-modal-header) {
	background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
	color: white;

	.ant-modal-title {
		color: white;
		font-weight: 600;
	}
}
</style>
